<template>
	<view class="bookshelf">
		<view class="container">
			<view class="book-header">
				<view class="txt">
					<text>書架</text>
					<view class="box"></view>
				</view>
				<div class="book-icon">
					<ul>
						<li v-for="(item,i) in bookIcon" @click="addEdit(i)">
							<image :src="item.img" mode=""></image>
						</li>
					</ul>
				</div>
			</view>
			<div class="book-banner">
				<div class="banner-left">
					<div class="banner-time">
						<p v-if="isShow">{{num | getMinute}}</p>
						<p v-else>0</p>
						<text>分鐘</text>
					</div>
					<div class="word">
						<text>本周閲讀時長</text>
					</div>
				</div>
				<div class="banner-right">
					<div class="right-box">
						<text>開通會員</text>
					</div>
				</div>
			</div>
			<div class="book-section">
				<div class="book-intro">
					<div class="intro-img">
						<image :src="hotImg" mode=""></image>
					</div>
					<div class="intro-con">
						<div class="hot">
							<text>今日推薦</text>
							<image src="../../static/fire.png" mode=""></image>
						</div>
						<div class="intro-word">
							<p>{{hotTitle}}</p>
							<text v-html="hotDetail"></text>
						</div>

					</div>
					<div class="intro-sign">
						<div class="sign-con">
							<text>已连签</text>
							<text>{{signNum}}天</text>
						</div>
						<div class="sign-btn" @click="addSign()">
							<text>签到</text>
						</div>
					</div>
				</div>
				<div class="bar">
					<u-notice-bar :text="text1"></u-notice-bar>
				</div>
				<div class="book-list">
					<ul>
						<li v-for="(item,i) in bookselfList" @click="addJumpDetail(item)" v-if="isShow">
							<div class="list-img">
								<image :src="item.book_img" mode=""></image>
							</div>
							<div class="list-con">
								<p>{{item.book_title}}</p>
								<text>{{item.book_author}}</text>
							</div>
						</li>

						<li @click="goCity()">
							<div class="add-img">
								<image src="../../static/addBook.png" mode=""></image>
								<text>更多好書</text>
							</div>
						</li>


					</ul>
				</div>
				
			</div>

		</view>
	</view>
</template>

<script>
	import {
		getColumn
	} from '@/api/index.js';
	export default {
		data() {
			return {
				bookIcon: [{
					img: '../../static/铃声.png'
				}, {
					img: '../../static/搜索.png'
				}, {
					img: '../../static/编辑.png'
				}],
				text1: '每日更新好書，等你來讀！',
				num: 0,
				timer: null,
				bookselfList: [],
				hotList: [],
				hotImg: '',
				hotTitle: '',
				hotDetail: '',
				signNum: 0,
				sign_create_time: '',
				user_nickName: '',
				isShow: false,
			}
		},
		onLoad() {
			let userInfo = uni.getStorageSync('userInfo')
			uni.showLoading({
				title:'加载中'
			})
			if(userInfo){
				this.isShow = true
				this.sign_create_time = new Date().getTime();
				this.user_nickName = userInfo.user_nickName;
				let run = uni.getStorageSync('runTime');
				this.num = run;
				getColumn(2001).then(content => {
					let {
						code,
						data: {
							books
						}
					} = content;
					this.hotImg = books[3].cover;
					this.hotTitle = books[3].title;
					this.hotDetail = books[3].description;
					// this.columnList = books;
					uni.hideLoading()
					console.log(books);
				}).catch(error => {
					console.log(error);
				})
				//调用云函数，查询书架
				uniCloud.callFunction({
						name: 'list_bookself',
						data: {}
					})
					.then(content => {
						// console.log('1.0',content);
						let {
							result: {
								data
							}
						} = content;
						this.bookselfList = data;
						this.hotList = data[0];
						
						uni.hideLoading()
					})
				uniCloud.callFunction({
						name: 'list_sign',
						data: {}
					})
					.then(content => {
						console.log('2.0', content);
						let {
							result: {
								data
							}
						} = content
						this.signNum = data.length
					})
			}else{
				uni.showToast({
					title:'您还没有登录呢！',
					icon:'none'
				})
				uni.hideLoading()
			}
		},
		methods: {
			goCity() {
				uni.switchTab({
					url: '../index/index'
				})
			},
			async addSign() {

				//调用云函数，查询签到
				await uniCloud.callFunction({
						name: 'list_sign',
						data: {}
					})
					.then(content => {
						console.log('2.0', content);
						let {
							result: {
								data
							}
						} = content;

						if (data.length == 0) {
							//调用云函数，添加签到
							uniCloud.callFunction({
									name: 'sign',
									data: {
										user_nickName: this.user_nickName
									}
								})
								.then(content => {
									console.log('1.0', content);
									let {
										result: {
											data
										}
									} = content;

									uni.showToast({
										title: '签到成功',
										icon: 'success'
									})
								})
						} else {
							let k = data.length;
							let signTime = this.formatData(data[k - 1].sign_create_time);
							let todayTime = this.formatData(this.sign_create_time);

							if (signTime == todayTime) {
								uni.showToast({
									title: '今天已签到过',
									icon: 'none'
								})
								return
							} else {
								//调用云函数，添加签到
								uniCloud.callFunction({
										name: 'sign',
										data: {
											user_nickName: this.user_nickName
										}
									})
									.then(content => {
										console.log('1.0', content);
										let {
											result: {
												data
											}
										} = content;
										// this.signNum = data.length

										uni.showToast({
											title: '签到成功',
											icon: 'success'
										})
									})
							}

						}

					})
			},
			formatData(data) {
				var date = new Date(data); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = date.getDate() + ' ';
				return Y + M + D;
			},
			addJumpDetail(item) {
				let data = {
					'id': item.book_sourceUuid,
					'category': item.book_category,
					'description': item.book_description
				}
				uni.navigateTo({
					url: '../detail/detail?data=' + encodeURIComponent(JSON.stringify((data)))
				})
			},
			addEdit(i){
				if(i==2){
					uni.navigateTo({
						url:'../editbook/editbook'
					})
				}
			}
		},
		filters: {
			getMinute(value) {
				return parseInt(value / 60);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bookshelf {
		background-image: url("../../static/background-image.png");
		left: -10px;
		top: 0px;
		width: 100%;
		height: 2000rpx;
		opacity: 1;

		.container {
			width: 91%;
			height: 100%;
			margin: 0 auto;
			// background-color: pink;
			overflow: hidden;

			.book-header {
				margin-top: 14rpx;
				width: 100%;
				height: 90rpx;
				line-height: 100rpx;
				display: flex;
				// align-items: center;
				justify-content: space-between;
				// background-color: skyblue;

				.txt {
					text {
						position: relative;
						font-size: 40rpx;
						font-weight: 700;
						color: rgba(59, 59, 59, 1);
						margin-left: 20rpx;
					}

					.box {
						position: absolute;
						left: 28px;
						top: 28px;
						width: 24px;
						height: 12px;
						opacity: 1;
						border-radius: 6px 0px, 5px, 0px;
						background: linear-gradient(90deg, rgba(255, 60, 0, 1) 0%, rgba(204, 204, 204, 0) 100%);

					}
				}

				.book-icon {
					margin-right: 10rpx;
					margin-top: 8rpx;

					ul {
						display: flex;
						list-style: none;
						padding: 0;

						li {
							width: 40rpx;
							height: 40rpx;
							margin-left: 40rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}

			.book-banner {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 93%;
				margin: 0 auto;

				.banner-left {
					width: 300rpx;
					// height: 100rpx;
					// background-color: pink;

					.banner-time {
						display: flex;

						// flex-direction: column;
						p {
							padding: 0;
							margin-right: 8rpx;
							font-size: 48px;
							font-weight: 500;
							color: #000;
						}

						text {
							margin-top: 80rpx;
							color: #000;
						}
					}

					.word {
						width: 200rpx;

						text {
							width: 100%;
							padding: 5rpx;
							color: rgba(59, 59, 59, 1);
							// font-weight: 600;
							font-size: 12px;
							font-weight: 600;
						}
					}
				}

				.banner-right {
					margin-top: 80rpx;
					width: 63px;
					height: 40px;
					background-image: url('../../static/sort.png');
					background-position: center center;
					background-repeat: no-repeat;
					background-size: cover;

					text {
						color: #fff;
						font-size: 11px;
						text-align: center;
						line-height: 36px;
						margin-left: 18rpx;
					}
				}
			}

			.book-section {
				width: 100%;
				// height: 1320rpx;
				margin: 30rpx auto 0;
				padding-bottom: 244rpx;

				border-radius: 20rpx;
				background-color: #fceccc;

				box-sizing: border-box;
				overflow: hidden;

				.book-intro {
					padding: 20rpx;
					box-sizing: border-box;
					width: 100%;
					display: flex;
					justify-content: space-between;

					.intro-img {
						width: 120rpx;
						height: 160rpx;

						image {
							width: 100%;
							height: 100%;
							// border: 1px solid #fd6143;
							border-radius: 8px;
						}

					}

					.intro-con {
						// display: flex;
						width: 300rpx;
						height: 160rpx;
						margin-left: 10rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						word-break: break-all;
						white-space: nowrap;

						.hot {
							margin-top: 4rpx;
							display: flex;
							align-items: center;

							text {
								font-size: 13.4px;
								color: rgba(238, 156, 111, 1);
							}

							image {
								margin-left: 10rpx;
								width: 30rpx;
								height: 30rpx;

							}
						}

						.intro-word {
							width: 100%;
							height: 100%;

							// overflow: hidden;
							p {
								margin: 16rpx 0 14rpx;
								text-overflow: ellipsis;
								overflow: hidden;
								word-break: break-all;
								white-space: nowrap;
								font-size: 16.8px;
								font-weight: 700;
								color: rgba(59, 59, 59, 1);
							}

							text {
								// margin-top: 4rpx;
								width: 100%;
								height: 36rpx;
								display: block;
								text-overflow: ellipsis;
								overflow: hidden;
								word-break: break-all;
								white-space: nowrap;
								font-size: 12.4px;
								color: rgba(135, 135, 135, 1);
							}
						}


					}

					.intro-sign {
						width: 140rpx;
						height: 150rpx;
						border-left: 1px solid #fc684a;
						padding: 0 0 5rpx 25rpx;
						text-align: center;

						.sign-con {
							display: flex;
							flex-direction: column;

							text {
								display: block;
								color: rgba(59, 59, 59, 1);
								font-weight: 600;
								margin-bottom: 10rpx;
							}
						}

						.sign-btn {
							width: 70px;
							height: 25px;
							border-radius: 25rpx;
							color: #fff;
							text-align: center;
							font-size: 13px;
							line-height: 25px;
							background-color: #f17e20;

							text {
								margin-top: 20rpx;
							}
						}
					}

				}

				.bar {
					width: 100%;
					margin-top: 20rpx;

					.u-notice-bar {
						background-color: #fceccc !important;
						padding: 0 8px;
					}

				}

				.book-list {
					width: 100%;
					margin-top: 32rpx;

					ul {
						display: flex;
						list-style: none;
						padding: 0;
						flex-wrap: wrap;

						li {
							// flex: 20%;
							width: 196rpx;
							height: 258rpx;
							margin-bottom: 136rpx;
							margin-left: 20rpx;
							margin-right: 6rpx;



							.list-img {
								width: 100%;
								height: 100%;

								image {
									width: 100%;
									height: 100%;
									border: 1px solid #fd6143;
									border-radius: 12px;
								}

							}

							.list-con {
								margin-top: 12rpx;

								p {
									text-overflow: ellipsis;
									overflow: hidden;
									word-break: break-all;
									white-space: nowrap;
									font-size: 16px;
									font-weight: 700;
									color: rgba(59, 59, 59, 1);
								}

								text {
									margin-top: 6rpx;
									display: block;
									text-overflow: ellipsis;
									overflow: hidden;
									word-break: break-all;
									white-space: nowrap;
									color: rgba(168, 168, 168, 1);
									font-size: 13.4px;

								}
							}

							.add-img {
								width: 194rpx;
								height: 250rpx;
								border: 1.2px solid rgba(232, 147, 48, 1);
								text-align: center;
								display: flex;
								flex-direction: column;
								justify-content: space-evenly;
								align-items: center;
								color: rgba(232, 147, 48, 1);

								image {
									margin-top: 20rpx;
									width: 62rpx;
									height: 62rpx;
								}

								text {
									margin-bottom: 10rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>